<!-- src/views/course.vue -->
<script setup lang="ts">
import { ref } from 'vue'

// 模拟浏览历史数据
const historyItems = ref([
  {
    id: 1,
    img: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
    title: '南昌唯一的丈夫……😱😱',
    desc: '到底谁还没吃他们家汽锅焖面啊啊啊！！一...',
    location: '前桶巷深夜食堂',
    time: '今天'
  },
  {
    id: 2,
    img: 'https://img01.yzcdn.cn/vant/apple-2.jpg',
    title: '在南昌变天都要吃的广顺兴粤...',
    desc: '#0元玩转这座城 最近南昌天气不好，...',
    location: '廣順興',
    time: '今天'
  }
])

// 标签页
const activeTab = ref('内容')
</script>

<template>
  <div class="favor-page">
    <van-tabs v-model="activeTab" sticky>
      <van-tab title="商户"></van-tab>
      <van-tab title="团购"></van-tab>
      <van-tab title="内容">
        <div class="history-container">
          <div class="section">
            <h3>今天</h3>
            <div v-for="item in historyItems" :key="item.id" class="item">
              <van-image width="80" height="80" :src="item.img" />
              <div class="info">
                <h4>{{ item.title }}</h4>
                <p>{{ item.desc }}</p>
                <div class="location">
                  <van-icon name="location-o" size="12" />
                  <span>{{ item.location }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="tip">
            — 仅保存最近2个月的浏览历史 —
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<style scoped>
.favor-page {
  padding: 10px;
}

.history-container {
  background: white;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.section {
  margin-bottom: 20px;
}

.section h3 {
  font-size: 14px;
  color: #999;
  margin: 0 0 10px 0;
}

.item {
  display: flex;
  margin-bottom: 15px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.item:last-child {
  border-bottom: none;
}

.item .info {
  margin-left: 10px;
  flex: 1;
}

.item h4 {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.item p {
  font-size: 12px;
  color: #666;
  margin: 4px 0;
}

.location {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tip {
  text-align: center;
  color: #ccc;
  font-size: 12px;
  margin-top: 20px;
}
</style>
